<template>
  <el-dialog
    title="发送短信"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <el-row>
      <el-row class="msg-style">
        <el-col :span="4">短信模板：</el-col>
        <el-col :span="20">
          <el-select v-model="msgValue" placeholder="请选择" @change="msgChange">
            <el-option
              v-for="item in msgOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row class="msg-style">
        <el-col :span="4">短信内容：</el-col>
        <el-col :span="20">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="msgContent">
          </el-input>
        </el-col>
      </el-row>
      <el-row class="msg-style">
        <el-col :span="4">手机号码：</el-col>
        <el-col :span="20">
          <el-input
            placeholder="请输入手机号"
            v-model="phone">
          </el-input>
        </el-col>
      </el-row>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="sendMsg">发送</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: 'send-msg',
    props: {
      dialogVisible: false,
      phone: ''
    },
    data() {
      return {
        msgValue: '',
        msgOptions: [],
        msgContent: ''
      }
    },
    mounted() {
      console.log('send msg mounted!!!')
      this.msgValue = window.commonOptions.msgOption[0].value,
      this.msgOptions = window.commonOptions.msgOption,
      this.msgContent = window.commonOptions.msgOption[0].content
    },
    methods: {
      msgChange(value) {
        this.msgContent = window.commonOptions.msgOption.find(item => item.value == value).content
      },
      // 自定义按钮
      selfButton(prop) {
        this.$emit('selfButton', prop)
      },
      sendMsg() {
        // 调用发送短信接口
        console.log('send msg content is: ' + this.msgContent + ', phone is: ' + this.phone)
        this.$emit('cancelDialog')
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            // 关闭弹框
            this.$emit('cancelDialog')
          })
          .catch(_ => {
          });
      }
    }
  }
</script>

<style scoped>
  .simpleDataBg {
    min-height: 108px;
    font-size: 14px;
    border: 1px solid #f5f7fa;
    padding: 5px;
    background: #f5f7fa;
    border-radius: 5px;
    margin-top: 5px;
  }

  .msg-style {
    padding: 5px 0;
  }

  .mgtb10 {
    margin: 10px 0;
  }

  .button-style {
    text-align: center;
  }

  .button-style el-button {
    padding-right: 20px;
  }
</style>
